<script setup lang="ts">
  import { ref } from 'vue'

  const props = defineProps({
    proType: {
      type: String,
      default: '',
    },
    proItem: {
      type: Object,
      default: () => {},
    },
    proIndex: {
      type: [Number, String],
      default: 0,
    },
  })

  const open = ref(props.proIndex == 0 ? true : false)
  const openClose = () => {
    open.value = !open.value
  }

  const deleteMain = (repairItemId: any) => {
    emit('delete', repairItemId)
  }
  // 每次输入都要触发计算价格getAllCount()   这个没写
  // 计算单个总价
  const emit = defineEmits(['getAllCount', 'delete'])
  const getItemCount = () => {
    props.proItem.price = (props.proItem.partPrice * 100 * props.proItem.num) / 100
    console.log('总价', props.proItem.price)
    // 触发合计金额
    emit('getAllCount')
  }
  const getAllCounts = () => {
    emit('getAllCount')
  }
</script>

<template>
  <view class="pro">
    <view class="pro-tlt">
      <view class="fs30 c1 fw400 pro-name">{{ proItem.repairItem }}</view>
      <view class="pro-right">
        <view class="pro-delete" v-if="props.proType !== 'finish'" @click.stop="deleteMain(proItem.repairItemId)">
          <ve-icon name="delete_2" size="40" color="#F53F3F" />
          <text class="fs28 fw400 c5 delete-button">删除</text>
        </view>
        <view class="pro-open" @click.stop="openClose">
          <text class="fs28 fw400 c3 open-button">{{ open ? '收起' : '展开' }}</text>
          <ve-icon v-if="open" name="arrow_top_1" size="28" />
          <ve-icon v-else name="arrow_bottom_1" size="28" />
        </view>
      </view>
    </view>
    <view class="pro-msg" v-if="open">
      <ve-form-item label="品牌">
        <ve-input :disabled="props.proType === 'finish'" v-model="proItem.maker" placeholder="请输入" :maxlength="20" />
      </ve-form-item>
      <ve-form-item label="单价" unit="元">
        <ve-input-number
          :disabled="props.proType === 'finish'"
          v-model="proItem.partPrice"
          :min="0"
          :max="99999999.99"
          :precision="2"
          placeholder="请输入"
          @blur="getItemCount"
        />
      </ve-form-item>
      <ve-form-item label="数量">
        <ve-input-number
          :disabled="props.proType === 'finish'"
          v-model="proItem.num"
          :min="0"
          :max="99999999"
          :precision="0"
          placeholder="请输入"
          @blur="getItemCount"
        />
      </ve-form-item>
      <ve-form-item label="总价" unit="元">
        <ve-input-number
          :disabled="props.proType === 'finish'"
          v-model="proItem.price"
          :min="0"
          :max="99999999.99"
          :precision="2"
          placeholder="请输入"
          @blur="getAllCounts"
        />
      </ve-form-item>
      <ve-form-item label="备注" labelPosition="top" :borderBottom="false">
        <ve-input :disabled="props.proType === 'finish'" type="textarea" v-model="proItem.remark" placeholder="请输入" :maxlength="200" />
      </ve-form-item>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .pro {
    .pro-tlt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      .pro-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 300rpx;
      }
      .pro-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .pro-delete {
          margin-right: 32rpx;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          .delete-button {
            margin-right: 12rpx;
            margin-left: 14rpx;
          }
        }
        .pro-open {
          .open-button {
            margin-right: 12rpx;
          }
        }
      }
    }
    .pro-msg {
      width: 100%;
      padding: 12rpx 24rpx;
      background: #eff0f2;
      .pro-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 32rpx;
        .pro-brand {
          width: 180rpx;
        }
        .pro-brand-name {
          flex: 1;
          margin-left: 20rpx;
        }
      }
    }
  }
  :deep(.ve-textarea) {
    background: #e6e7ea !important;
  }
</style>
